<template>
  <div class="leftchild13">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>评论管理</li>
    </header>
    <main>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="称呼：">
              <a-input
                v-model:value="formState.Usename"
                placeholder="请输入用户账户"
              />
            </a-form-item>

            <a-form-item label="Email:">
              <a-input
                v-model:value="formState.email"
                type="textarea"
                placeholder="请输入账户邮箱"
              />
            </a-form-item>

            <a-form-item label="状态：">
              <a-select v-model:value="formState.region">
                <a-select-option value="已通过">已通过</a-select-option>
                <a-select-option value="未通过">未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <div v-if="state.flag">
            <a-button>通过</a-button>
            <a-button>拒绝</a-button>
            <a-button danger>删除</a-button>
          </div>
          <div v-if="!state.flag"></div>
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <a href=""><ReloadOutlined /></a>
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="state.data"
            :scroll="{ x: 1300 }"
            :row-selection="rowSelection"
          >
            <template #action0>
              <div style="display: flex; align-items: center">
                <li class="li"></li>
                未通过
              </div>
            </template>

            <template #action1>
              <a-popover title="评论详情-原始内容">
                <template #content> </template>
                <a>查看内容</a>
              </a-popover>
            </template>

            <template #action2>
              <a-popover title="评论详情-原始内容">
                <template #content> </template>
                <a>查看内容</a>
              </a-popover>
            </template>

            <template #action3>
              <a-popover placement="right">
                <template #content>
                  <p>404</p>
                </template>
                <template #title>
                  <span>页面预览</span>
                </template>
                <a>文章</a>
              </a-popover>
            </template>

            <template #action>
              <div style="display: flex; justify-content: space-around">
                <a>通过</a><a>拒绝</a
                ><a>
                  <a @click="showModal">回复</a>
                  <a-modal
                    v-model:visible="visible"
                    title="回复评论"
                    @ok="handleOk"
                    cancelText="取消"
                    okText="回复"
                  >
                    <a-textarea
                      v-model:value="value"
                      placeholder="支持 MarkDown"
                      :rows="4"
                    />
                  </a-modal> </a
                ><a>
                  <a-popconfirm
                    title="确认删除这个评论？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="confirm"
                    @cancel="cancel"
                  >
                    <a href="#">
                      <a>删除</a>
                    </a>
                  </a-popconfirm></a
                >
              </div>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRaw,
  UnwrapRef,
  onMounted,
  ref
} from 'vue'
interface FormState {
  Usename: string
  region: string | undefined
  email: string
}
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
//表格
const columns = [
  {
    title: '状态',
    slots: { customRender: 'action0' },
    width: 100,
    dataIndex: 'pass',
    key: 'id',
    fixed: 'left'
  },
  { title: '称呼', dataIndex: 'name', key: 'id' },
  { title: '联系方式', dataIndex: 'email', key: 'id' },
  { title: '原始内容', slots: { customRender: 'action1' }, key: 'id' },
  { title: 'HTML 内容', slots: { customRender: 'action2' }, key: 'id' },
  { title: '管理文章', slots: { customRender: 'action3' }, key: 'id' },
  { title: '创建时间', dataIndex: 'createAt', key: 'id' },
  { title: '父级评论', dataIndex: 'address', key: 'id' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 180,
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  id: number
  name: string
  address: string
}

export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    let state: any = reactive({
      data: [],
      flag: false
    })
    const rowSelection = {
      onChange: (
        selectedRowKeys: (string | number)[],
        selectedRows: DataItem[]
      ) => {
        if (selectedRows.length == 0) {
          state.flag = false
        } else {
          state.flag = true
        }
      },
      onSelect: (
        record: DataItem,
        selected: boolean,
        selectedRows: DataItem[]
      ) => {
        console.log(record, selected, selectedRows)
      },
      onSelectAll: (
        selected: boolean,
        selectedRows: DataItem[],
        changeRows: DataItem[]
      ) => {
        console.log(selected, selectedRows, changeRows)
      }
    }
    onMounted(() => {
      axios.get('https://creationapi.shbwyz.com/api/comment').then((res) => {
        let newlist = res.data.data[0].map((item: any, index: number) => {
          return { ...item, key: index }
        })
        state.data = newlist
        console.log(state.data[0])
      })
    })
    const formState: UnwrapRef<FormState> = reactive({
      Usename: '',
      region: undefined,
      email: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
    }
    let resetting = () => {
      formState.Usename = ''
      formState.email = ''
      formState.region = ''
    }
    const error = () => {
      message.warning('访客无权进行该操作')
    }
    //表格
    const visible = ref<boolean>(false)
    const showModal = () => {
      visible.value = true
    }
    const handleOk = (e: MouseEvent) => {
      console.log(e)
      visible.value = false
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    const value = ref<string>('')
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      resetting,
      error,
      state,
      columns,
      rowSelection,
      showModal,
      visible,
      handleOk,
      confirm,
      cancel,
      value
    }
  }
})
</script>

<style lang="scss">
.leftchild13 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 3px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  main {
    flex-grow: 1;
    overflow-y: scroll;

    .top {
      width: 97%;
      background: #fff;
      margin: 2% auto;
      padding-top: 20px;

      .top-top {
        display: flex;
        align-items: center;

        .ant-form {
          display: flex;
          justify-content: space-around;

          input {
            width: 200px;
            margin-left: 10px;
          }

          label {
            margin-left: 10px;
          }

          .ant-col {
            margin-right: 10px;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }

    .middle {
      width: 97%;
      height: 260px;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        cursor: pointer;
        button {
          margin-left: 10px;
        }
      }

      .m-middle {
        .li {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: orange;
          margin-right: 6px;
        }
      }
    }

    .btn2 {
      margin-left: 13px;
    }
  }
}
.ant-modal-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
